<template>
	<yd-layout id='live' class=''>
		<header class="header">
			<div class="header_children" v-if='$route.query.kind==1'>
				<img class="header_img" :src="dataObj.title_img" alt="" />
				<div class="time c_size_34_48" v-if='overYg'>
					<div>{{overYg?'距开播还剩':' '}}</div>
					<div>
						<yd-countdown :time="dataObj.time" :callback='timeCallback' timetype="datetime">
							<span>{%d} &nbsp;<i>天</i>&nbsp;&nbsp;</span>
							<span>{%h} &nbsp;<i>时</i>&nbsp;&nbsp;</span>
							<span>{%m} &nbsp;<i>分</i>&nbsp;&nbsp;</span>
							<span>{%s} &nbsp;<i>秒</i></span>
						</yd-countdown>
					</div>
				</div>
			</div>
			<!--:style="contentStyle"-->
			<div class="header_children_100" ref='headerChildrenRef' v-else >
				<div class="header_children_100_c">
					<div class="mengban" @click='playVideo'  v-show="playBtn"></div>
					<div class="mengbanimg"  v-show="playBtn" :style="mengBanImgStyle"></div>
					<img v-show='playBtn' @click='playVideo' src="../../assets/playBtn.png" alt="" />
					<div class="h5_player">
						<!--:poster="dataObj.title_img" -->
						<video id="test_video" width="100%" ref='videoRef' height="30%" x5-video-orientation="portraint" webkit-playsinline="true" playsinline="" x5-playsinline="" x-webkit-airplay="allow" @pause="pauseVideo" @playing='playIngVideo' :src="dataObj.url" preload="" class="content_video text_left" style="position: 
							inherit;width:100%;">
						</video>
						<!--<video 
							:class="h5VideoFlg?'h5_video':''"
							webkit-airplay="true"  
							@pause="pauseVideo"
							@playing='playIngVideo'
							ref='videoRef'
							:style="contentStyle"
							id="videoID"
							webkit-playsinline="true" 
							playsinline="true"
							x5-video-player-type="h5"
							x5-video-player-fullscreen="false"
							width="100%" 
							height="100"
							preload="auto"  
							:poster="dataObj.title_img" 
							:src="dataObj.url"
						>-->
						</video>
					</div>
				</div>

				<!--<div class="cs" v-show="palyOpen">ces</div>-->
			</div>
		</header>
		<div class="content">
			<div class="live_title">
				<div class="c_size_34_48 ">{{dataObj.title}}</div>
				<div v-if="$route.query.kind==1" class="time">直播时间：{{dataObj.liveTime}}</div>
				<div v-else class="time">{{dataObj.pv}}人观看</div>
			</div>
			<div class="live_teacher">
				<img class="live_teacher_img" :src="dataObj.avatar" alt="" />
				<div class="live_teacher_right">
					<div class="teacher_name c_size_30_42 c_text_ellipsis_1">{{dataObj.nick_name}}</div>
					<span>{{dataObj.summary||'暂无相关介绍'}}</span>
				</div>
			</div>
			<div class="live_detail">
				<div class="title c_size_34_48">直播介绍</div>
				<template v-if="dataObj.detail">
					<div class="c_v_html" v-html="dataObj.detail"></div>
				</template>
				<div v-else class="no_detail">
					暂无直播介绍
				</div>
			</div>
		</div>
		<div class="c_go_home c_size_30_42" @click="$router.push({name:'index',query:{str:'index'}})">去首页</div>
		<!--输入密码-->
		<PopPassword @postPassword='postPassword' :showPop.sync='showPop' :passwordNum.sync='passwordNum'></PopPassword>

	</yd-layout>
</template>

<script>
	import { CountDown } from 'vue-ydui/dist/lib.rem/countdown';
	import { Popup } from 'vue-ydui/dist/lib.rem/popup';
	import PopPassword from '../../components/PopPassword/PopPassword.vue'
	export default {
		components: {
			[CountDown.name]: CountDown,
			[Popup.name]: Popup,
			[PopPassword.name]: PopPassword,
		},
		data() {
			return {
				playBtn: true,
				palyOpen: false,
				h5VideoFlg: false,
				contentStyle: {},
				videoHeight: '',
				dataObj: {},
				mengBanImgStyle: {},
				mineObj: {},
				listObj: {},
				showPop: false,
				passwordNum: '',
				overYg: true,
				kindFlg2: false,
			}
		},
		created() {
			
		},
		//销毁实例
		beforeDestroy() {

			if(this.kindFlg2) {
				this.$root.submitEvent({
					kind: 2,
					lastFlg: true
				})
			}

		},
		watch: {

		},
		computed: {

		},
		async mounted() {
			//			setTimeout(()=>{
			//				this.$nextTick(()=>{
			//					this.videoHeight = document.getElementById('app').clientHeight+'px'
			//					this.contentStyle = {
			//						width: '100%',
			//							//height: ((contentHight-headerHight-btnHight) / 100 * 2-0.32) + 'rem',
			//						height: this.videoHeight,
			//					}
			//				})
			//			},10)
			//预告详情
			await this.getMine();
			this.getTrailer()
			if(this.$route.query.kind == 1) {
				document.title = '直播预告'
			} else {
				document.title = '直播回放'
			}
		},
		methods: {
			//预告结束
			timeCallback() {
				this.overYg = false;
			},

			getTrailer() {
				let name = 'live/trailer'
				if(this.$route.query.kind == 2) {
					name = 'live'
				}
				this.$root.ajax({
					name: name,
					type: 'get',
					params: {
						id: this.$route.query.id
					}
				}).then((d) => {

					d.data.time = this.$root.getDate(new Date(d.data.start_time * 1000), {
						str: '/',
						allTime: true
					})

					d.data.liveTime = this.$root.getDate(new Date(d.data.start_time * 1000), {
						str: '-',
						allTime: true
					})
					if(this.$route.query.kind == 2) {
						d.data.newTitle = `【直播录像】${d.data.title}`
						this.mengBanImgStyle = {
							background: `url(${d.data.title_img}) no-repeat`,
							backgroundSize: `100% 100%`,
						}
					} else {
						d.data.newTitle = `【直播预告】${d.data.title}`
					}
					this.dataObj = Object.assign({}, this.dataObj, d.data)

					if(this.$root.isWeiXin()) {
						//分享
						let query = '';
						if(this.$root.config.channel) {
							query = `params=channelDY2FGoldUrlStrDY${this.$route.name}FGkeyNumDY2FGparamsKey1DYidFGparamsVal1DY${this.$route.query.id}FGparamsKey2DYkindFGparamsVal2DY${this.$route.query.kind}`
						} else {
							query = `params=oldUrlStrDY${this.$route.name}FGkeyNumDY2FGparamsKey1DYidFGparamsVal1DY${this.$route.query.id}FGparamsKey2DYkindFGparamsVal2DY${this.$route.query.kind}`
						}
						this.$root.wxShare({
							d: {
								title: this.dataObj.newTitle,
								title_img: this.dataObj.title_img
							}, //分享对象，题目等
							query: query, //参数
							desc: `分享嘉宾:${this.mineObj.nick_name}`
						})
					}
				})
			},
			//输入密码
			async postPassword() {
				if(this.passwordNum.length == 6) {
					let o = {
						room_id: this.listObj.id,
						password: this.passwordNum,
						msgRouter: true,
						passwordFlg: true,
					};
					var data = await this.$root.liveFlg(o);
					if(data.code == 0) {
						this.showPop = false;
					}
					var myVideo = this.$refs.videoRef;
					myVideo.play();
					this.playBtn = false
					this.palyOpen = true
					this.h5VideoFlg = true
					
					if(this.$route.query.kind == 2) {
						this.kindFlg2 = true
						this.$root.id = this.$route.query.id
						this.$root.uuid = (parseInt((parseInt(new Date() - 0)) / 1000)) + '' + (this.$root.userInfo.me.id || 0)
						this.$root.submitEvent({
							kind: 2,
						})
						this.$store.commit({
							type: 'setDataEvent',
							data: {
								kind: 2,
								position: 0,
								uuid: this.$root.uuid,
								oid: this.$route.query.id,
								uid: this.$root.userInfo && (JSON.stringify(this.$root.userInfo) != '{}') ? this.$root.userInfo.me.id : 0
							}
						})
					}

				} else {
					this.$dialog.toast({
						mes: '请根据提示正确输入',
						timeout: 1500
					});
				}
			},
			playVideo() {
				var myVideo = this.$refs.videoRef;
				myVideo.play();
				myVideo.pause();
				this.$nextTick(() => {
					this.$root.liveFlg({
						room_id: this.$route.query.id,
						msgRouter: true,
					}).then((d) => {
						myVideo.play();
						myVideo.pause();
						if(this.dataObj.is_req_pwd == 1 && this.dataObj.is_input_pwd != 1) {
							this.showPop = true;
							this.listObj = Object.assign({}, this.listObj, this.dataObj)
							this.passwordNum = ''
						} else {
							this.videoPlayFunc();
						}
					})
				})

			},
			playIngVideo() {
				var myVideo = this.$refs.videoRef;

				myVideo.setAttribute('controls', 'controls')
				this.palyOpen = true
			},
			videoPlayFunc() {
				this.playBtn = false
				this.palyOpen = true
				this.h5VideoFlg = true
				var myVideo = this.$refs.videoRef;
				myVideo.play();
				myVideo.setAttribute('controls', 'controls')
				
				if(this.$route.query.kind == 2) {
					this.kindFlg2 = true
					this.$root.id = this.$route.query.id
					this.$root.uuid = (parseInt((parseInt(new Date() - 0)) / 1000)) + '' + (this.$root.userInfo.me.id || 0)
					this.$root.submitEvent({
						kind: 2,
					})
					this.$store.commit({
						type: 'setDataEvent',
						data: {
							kind: 2,
							position: 0,
							uuid: this.$root.uuid,
							oid: this.$route.query.id,
							uid: this.$root.userInfo && (JSON.stringify(this.$root.userInfo) != '{}') ? this.$root.userInfo.me.id : 0
						}
					})
				}

			},
			pauseVideo() {
				this.palyOpen = false
			},
			getMine() {
				return new Promise((resolve, reject) => {
					this.$root.ajax({
						name: 'my',
						params: {}
					}).then((d) => {
						this.mineObj = Object.assign({}, this.mineObj, d.data)
						resolve(d)
					})
				})

			},
		}
	}
</script>

<style lang="scss">
	@import './live.scss';
</style>